<template>
  <div class="page new-sign grey-stage" :class="{'grey-stage': this.catId}" :style="{'min-height': winHeight + 'px'}">
    <div class="container scroll-container" :style="{'height': winHeight + 'px'}">
      <div v-if="show"
        v-infinite-scroll="loadSalesOrder"
        :infinite-scroll-disabled="loading"
        infinite-scroll-distance="30">
          <div class="rela-tip-main">
            <summary-bar
            :sumNum="data.total"
            :sumMoney="data.order_total_sum"
            />
          </div>

          <div class="no-data-tip" v-if="!Object.keys(list).length && init">暂无数据</div>
          <div class="new-new-sign-box">
            <new-sign-item v-for="(custom, index) in list"
            :key="index"
            :value="custom"></new-sign-item>
          </div>
          <div class="center-content-block load-more"
            @click="loadSalesOrder()"
            v-if="hasMoreData !== false && loading !== true">
            <span>点击加载</span>
          </div>
          <div class="no-data-tip" v-if="loading === true && hasMoreData === true" >
            <span>加载数据中...</span>
          </div>
      </div>
    </div>
  </div>
</template>
<script>
  import { mapActions, mapState } from 'vuex'
  import crmTabbar from '../components/crm-tabbar'
  import customItem from '../components/custom-item'
  import newSignItem from '../components/new-sign-item'
  import summaryBar from '../components/summary-bar'

  export default {
    props: ['loadMethod'],
    mounted () {
      this.initParams()
      this.caculateScroller()
      this.callJsApi('biz.navigation.setTitle', { title: '我的新增签约' })
    },
    components: {
      crmTabbar,
      customItem,
      newSignItem,
      summaryBar
    },
    methods: {
      initParams () {
        const query = this.$route.query
        this.params = {
          flag_id: query.flag_id,
          team_id: query.team_id,
          type: query.type,
          timestamp: this.getTimestamp(new Date(parseInt(query.time)))
        }
      },
      getTimestamp(dateObject) {
        let currentYear = dateObject.getFullYear()
        let currentMonth = dateObject.getMonth()
        let currentMonthDate = new Date(currentYear, currentMonth)
        return Math.floor(currentMonthDate.getTime() / 1000)
      },
      loadSalesOrder () {
        if (this.hasMoreData === false) {
            this.loading = true
            return
        }

        let promise
        if (this.loading === true) return
        const func = this.loadMethod ? this.loadMethod : this.getNewSignList

        // promise = this.getNewSignList({page_index: this.page_index, page_size: this.page_size})
        promise = func(Object.assign({
          page_size: this.page_size,
          page_index: this.page_index
        }, this.params))
        this.loading = true
        this.init = false

        promise.then((response) => {
          this.init = true
          if (response.data.errcode === 0) {
            const results = response.data.results
            const list = results.list;
            if (Object.keys(results).length > 0) {
              const originLen = Object.keys(this.list).length
              this.list = Object.assign(this.list, list || {})
              this.data = results

              const currentLen = Object.keys(this.list).length
              this.hasMoreData = originLen !== currentLen
              this.page_index++
              this.total = results.total
            } else {
              this.hasMoreData = false
            }

          } else {
            this.hasMoreData = false
          }
          this.loading = false
        }).catch((e) => {
          this.init = true
          this.hasMoreData = false
          this.loading = false
          console.log(e)
        })
      },
      reset () {
        this.hasMoreData = true
        this.loading = false
        this.list = []
        this.show = false
        this.total = 0
        this.page_index = 1
        this.false = true
        this.callJsApi('biz.navigation.setTitle', { title: '我的新增客户' })

        setTimeout(() => {
          this.show = true
        })
      },
      jumpTo (cst) {

      },
      caculateScroller () {
        this.winHeight = window.innerHeight - 52
      },
      ...mapActions({
        'getNewSignList': 'getNewSignList',
        'getCatcstList': 'getCatcstList',
        'changeReadStatus': 'changeReadStatus',
        'getMsgCount': 'getMsgCount',
      })
    },
    activated () {
    },
    computed: {
      ...mapState({
        fullPath: state => state.route.fullPath,
        isAppMode: state => state.config.isAppMode,
        msgCount: state => state.msg.msgCount,
        windowSize: state => state.app.windowSize
      })
    },
    watch: {
      fullPath () {
        this.reset()
      },
      msgCount () {
        this.reset()
        this.list = []
        this.page_index = 1;
        setTimeout(() => {
          this.loadSalesOrder();
        })
      },
      windowSize (size) {
        this.caculateScroller()
      }
    },
    data () {
      return {
        catId: '',
        winHeight: '',
        page_index: 1,
        params: {
          time: '',
          flag_id: '',
          type: '',
        },
        data: {},
        init: false,
        page_size: 30,
        loading: false,
        show: true,
        hasMoreData: true,
        list: {},
        total: 0
      }
    }
  }
</script>
<style lang="less">
  @import "../less/base";
  .new-sign {
    overflow: hidden;

    .grey {
      color: #999999;
    }

    .sign-info-det {
      float: right;
    }

    label, .sign-usr-name{
      font-weight: bold;
      color: #666666;
    }
    .sign-usr-mon {
      font-weight: bold;
      color: #ff6601;
    }

    .sign-link-ico {
      content: " ";
      display: inline-block;
      height: 6px;
      width: 6px;
      border-width: 2px 2px 0 0;
      border-color: #C8C8CD;
      border-style: solid;
      -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
      position: relative;
      margin-top: -4px;
      right: 10px;
    }

    @sign-radius-size: 12px;
    @padding: 3px;

    .sign-new-ico {
      display: inline-block;
      height: @sign-radius-size;
      width: @sign-radius-size;
      border-radius: 50%;
      color: #fff;
      // border:1px solid #35adff;
      // border-color: #C8C8CD;
      background-color: red;
      position: absolute;
      top: 50%;
      text-align: center;
      line-height: @sign-radius-size;
      font-size: 12px;
      overflow: hidden;
      white-space: nowrap;
      padding: @padding;
      margin-top: -(@sign-radius-size / 2);
      margin-right: -(@sign-radius-size / 2);
      right: 50%;
      // right: 2px;
      font-weight: bolder;

      &.point {
        width: 4px;
        height: 4px;
      }
    }

    .sign-bd-item {
      padding-bottom: 15px;
      border-bottom: 1px solid #e4e4e4;
      margin-bottom: 15px;
      overflow: hidden;
    }

    .prop-label {
      float: left;
      padding: 2px 10px;
      border: 1px solid #cccccc;
      margin-right: 5px;
      border-radius: 4px;

      &.select {
        border: 1px solid #01aaef;
        color: #01aaef;
        position: relative;
      }

      &.select::after {
        content: '';
        width: 12px;
        height: 14px;
        right: 0;
        bottom: 0;
        z-index: 10;
        display: block;
        background: url(//fin.91mycloud.com/box-checked.png) no-repeat center center ;
        background-size: cover;
        position: absolute;
      }
    }

    .sign-item {
      display: flex;
      background-color: white;
      border-bottom: 1px solid #f3f0f0;
      padding: 10px 5px 10px 4px;
      border-radius: 2px;
      cursor: pointer;
    }

    .sign-item:last-child {
      border: none;
    }





    .sign-left {
      display: flex;
      flex: initial;
      padding-right: 10px;
      align-items: center;
    }

    .new-sign-box {
      padding: 0 0 0 20px;
    }

    .sign-info-block {
      display: flex;
    }

    .sign-info-left {
      flex: 1;
    }

    .sign-info-right {
      flex: initial;
      position: relative;

      &.radius {
        width: 36px;
      }

      &.width-10 {
        width: 30px;
      }
    }

    .sign-right {
      flex: 1;
    }



    .read-status {
      position: absolute;
      right: 0;
      color: #f43530;
    }

    .sign-avatar {
      width: 30px;
      height: 30px;
      display: flex;
      flex: 1;
      border-radius: 50%;
      // overflow: hidden;

      img {
        width: 100%;
        // height: 100%;
      }
    }

    .sum-title-bar {
      margin: 10px 0;
    }

    .load-more {
      color: #35adff;
      cursor: pointer;
    }
  }
</style>
